<template>
	<!-- :style="`height: ${statusBarHeight}px;`" -->
	<view class="structure">
		<view class="tops"></view>
		<view :class="topnav.flex===true?'navbar' : 'navbars'">
			<view class="navbarleft" v-if="topnav.left">
				<view class="" v-for="(item,index) in topnav.lefticon" :key="index">
					<u-icon 
					@click="isforbid(item.tab)"
					class="icons" :name="item.pic" color="#333333" :size="item.sizes" style="padding:0 30rpx;"></u-icon>
					</view>
			</view>
			<view class="center"  v-if="topnav.center">
				<u-search :placeholder="topnav.placeholders" v-model="keyword"></u-search>
			</view>
			<view class="navbarright"  v-if="topnav.right" >
				<view class=""  v-for="(items,index) in topnav.righticon" :key="index">
					<u-icon 
					@click="isforbid(items.tab)"
					class="icons" :name="items.pic" color="#333333" :size="items.sizes" style="padding:0 30rpx;"></u-icon>
					</view>
			</view>
		</view>
		<slot name="merchant">
			<view class="merchant" @click="addshop" v-if="shoplists !==''">
				<image :src="shoplists.logo" mode="" class="merchant-pic"></image>
				<view class="merchant-text">
					<view class="merchant-name">
						<text>{{shoplists.name}}</text>
						<u-icon name="arrow-right" size="35"></u-icon>
					</view>
					<view class="merchant-messige">
						<text>店铺ID:{{shoplists.id}}</text>
					</view>
				</view>
			</view>
		</slot>
	</view>
</template>

<script>
	export default{
		props:["shoplists"],
		data(){
			return{
				flex:false,
				statusBarHeight:"20",
				keyword:"",
				topnav:{
					left:true,
					lefticon:[
						{pic:"arrow-left",sizes:40,tab:0,}
					],
					center:false,
					placeholders:"请输入搜索内容",
					right:true,
					righticon:[
						{pic:"kefu-ermai",sizes:40,tab:1,},
						{pic:"more-dot-fill",sizes:40,tab:2,},
					]
				}
			}
		},
		onLoad() {
			 let {
			 	statusBarHeight,
			 	system
			 } = uni.getSystemInfoSync()
			 this.statusBarHeight = statusBarHeight
		},
		methods:{
			isforbid(el){
				// console.log(e)
				this.$emit("send", el)
			},
			// 修改店铺信息
			addshop(){
				this.$emit("shop")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.structure{
		width: 100%;
		// height: 383rpx;
		background-image: url(../../static/img/background.png);
	}
	.tops{
		width: 100%;
		height: var(--status-bar-height);
	}
	.navbar{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 30rpx 0;
	}
	.navbars{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 30rpx 0;
	}
	.navbarleft{
		display: flex;
	} ;
	.navbarright{
		display: flex;
	}
	.merchant {
		display: flex;
		width: 690rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		padding-bottom: 60rpx;
	
		.merchant-pic {
			width: 100rpx;
			height: 100rpx;
		}
	
		.merchant-text {
			margin-left: 35rpx;
	
			.merchant-name {
				font-size: 38rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
	
			.merchant-messige {
				color: #999999;
				font-size: 24rpx;
	
				.marginleft {
					margin-left: 45rpx;
				}
			}
		}
	}
</style>
